<script>
import { 
  ref, 
  // watchEffect
} from "vue";
import { useRouter } from "vue-router";
import $bus from "@/utils/bus";
import { getAssets } from "@/utils/index";
// import components from "./components/index";
import {
  // useMessage,
  NModal
} from "naive-ui";
import skeleton from "@/components/base/skeleton.vue";
import lightButton from "@/components/base/lightButton.vue";


// 编辑渠道信息

// const lightButton = defineAsyncComponent(() => import("@/components/base/lightButton.vue"));

const router = useRouter();
// console.log(platformsDialog, NModal);

export default {
  components: {
    // ...components,
    lightButton,
    skeleton,
    NModal
  },
  // props.data
  setup() {
    // const $Message = useMessage();
    const dialogs = ref([]);
    const skeletonStatu = ref(false);
    // const componentLoadNum = ref(0);

    /**
     * methods
     * */
    const getAssetsFn = getAssets;

    const createDialog = (data) => {
      if (!dialogs.value.find((v) => v.id == data.id)) {
        dialogs.value = dialogs.value.concat([
          {
            ...data,
            visible: true
          }
        ]);
      }
    };

    const closeDialog = (item) => {
      dialogs.value = dialogs.value.filter((v) => v.id !== item.id);
      if (item.closeReset) {
        router.push("/");
      }
    };

    const componentsCallBack = () => {};
    /**
     * $bus 监听
     * */
    $bus.$on("@components/base/dialog.show", (data) => {
      createDialog(data);
    });

    $bus.$on("@components/base/dialog.close", (id) => {
      closeDialog(id);
    });

    $bus.$on("@components/base/dialog.closeAll", () => {
      dialogs.value = [];
    });

    // console.log("components ==> ", components);

    return {
      skeletonStatu,
      dialogs,
      createDialog,
      closeDialog,
      componentsCallBack,
      getAssetsFn
    };
  }
};
</script>
<template>
  <div class="dialog-base">
    <!-- 自定义 -->
    <div class="dialog-modal" v-for="(item, key) in dialogs" :key="key">
      <div 
        class="dialog-conent" 
        :class="[
          `${item.animate || 'animate__zoomIn'}`,
          `${['confirm-warning'].includes(item.dialogType) ? 'confirm-warning-dialog-conent' : null}`
        ]"
        :style="{ width: item.width || '480px' }"
      >
        <div class="dialog-header">
          <div class="title-nav">
            <template v-if="item.title">
              <img 
                v-if="['confirm-warning'].includes(item.dialogType)"
                class="warning-icon" 
                :src="getAssetsFn('img/icon/warning_icon.svg')"
              />
              <span>{{ item.title }}</span>
            </template>
          </div>
          <div class="close-btn" @click="closeDialog(item)"></div>
        </div>
        <div 
          class="explain" 
          :class="{
            'confirm-warning-explain': ['confirm-warning'].includes(item.dialogType)
          }"
          v-html="item.explain"
        ></div>
        <div v-if="item.component" class="dialog-component base-nav-scrollbar">
          <!-- <skeleton :line="3" type="platforms" /> -->
          <skeleton v-if="skeletonStatu" :line="3" type="platforms" />
          <component
            v-else
            :is="item.component"
            :diloag-data="item"
            @closeDialog="closeDialog(item)"
            @callBack="componentsCallBack"
          >
          </component>
        </div>
        <div 
          class="footer" 
          v-if="['confirm', 'confirm-warning'].includes(item.dialogType)"
        >
          <light-button type="info" btnSize="small" :btnWidth="80" btnContent="Cancel" @btnClick="closeDialog(item)" />
          <light-button 
            style="margin-left: 12px" 
            :btnWidth="80" 
            :type="['confirm-warning'].includes(item.dialogType) ? 'warning' : 'primary'" 
            btnSize="small" 
            :btnContent="item.btnContent || 'OK'" 
            @btnClick="item.confirmCallBack"
          />
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.dialog-base {
  background: #000;
  width: 100%;
  color: #fff;
  z-index: 1000;
  position: relative;
  .dialog-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: var(--color-black-500, rgba(0, 0, 0, 0.5));
    .dialog-conent {
      padding: 24px 0;
      border-radius: var(--radius-radius-6, 12px);
      border: 2px solid var(--bg-border-border-m, rgba(255, 255, 255, 0.12));
      background: var(--bg-window-bg-window-L, linear-gradient(180deg, rgba(58, 62, 77, 0.9) 0%, rgba(42, 43, 53, 0.8) 98.96%));
      /* Pop window/Pop window-L */
      box-shadow: 0px 12px 80px 5px rgba(11, 13, 19, 0.5);
      backdrop-filter: blur(40px);
      animation-duration: 0.6s;
      &.confirm-warning-dialog-conent {
        background: linear-gradient(180deg, rgba(70, 48, 48, 0.90) 0%, rgba(42, 43, 53, 0.80) 98.96%);
        border: 1.5px solid rgba(255, 255, 255, 0.06);
        box-shadow: 0px 12px 80px 5px rgba(11, 13, 19, 0.50);
      }
      .dialog-header,
      .explain {
        padding: 0 24px;
        &.confirm-warning-explain {
          margin-left: 34px;
        }
      }
      .dialog-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        .title-nav {
          display: flex;
          align-items: center;
          color: var(---text-primary, #fff);
          font-size: 18px;
          font-weight: 600;
          line-height: 28px; /* 155.556% */
          .warning-icon {
            margin-right: 8px;
          }
        }
        .close-btn {
          cursor: pointer;
          position: relative;
          top: -8px;
          right: -6px;
          width: 34px;
          height: 34px;
          background: url(../../../assets/img/icon/close.svg) center center no-repeat;
          &:hover {
            border-radius: var(--radius-radius-4, 8px);
            background-color: var(--color-white-60, rgba(255, 255, 255, 0.06));
          }
        }
      }
      .explain {
        color: var(---text-primary-3, rgba(255, 255, 255, 0.6));
        /* 14_sm/regular */
        font-size: 14px;
        font-weight: 400;
        line-height: 20px; /* 142.857% */
      }
      .dialog-component {
        margin: 20px 0 0;
        max-height: calc(80vh - 120px);
        overflow: auto;
      }
    }
  }
  .footer {
    padding: 20px 24px 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
}
</style>
